<template>
  <el-row :gutter="20" class="panel-group">
    <el-col :xs="12" :sm="12" :md="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people">
          <img src="../../assets/images/activecount.jpg" alt="" width="122px" height="40px">
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text ">
            活动总数(场)
          </div>
          <count-to :start-val="0" :end-val="count" :duration="1600" class="card-panel-num"/>
          <div class="card-panel-end_text " style="color: #FF4141;font-weight: 700" v-if="true">
            <span class="el-icon-bottom"> </span>
            <span>13.8%</span>
          </div>

          <div v-else class="card-panel-end_text " style="color: #3CC480;font-weight: 700">
            <span class="el-icon-top"> </span>
            <span>13.8%</span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :md="6" class="card-panel-col">
      <div class="card-panel">

        <div class="card-panel-icon-wrapper icon-people">
          <img src="../../assets/images/jinxing.jpg" alt="" width="122px" height="40px">
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text ">
            进行中活动数（场）
          </div>
          <count-to :start-val="0" :end-val="data[2].data" :duration="1600" class="card-panel-num"/>
          <div class="card-panel-end_text " style="color: #3CC480;font-weight: 700">
            <span class="el-icon-top"> </span>
            <span>13.8%</span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :md="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people">
          <img src="../../assets/images/baoming.jpg" alt="" width="122px" height="40px">
        </div>

        <div class=" card-panel-description ">
          <div class="card-panel-text  Cumulative-enrollment-text ">
            累计报名数（人）
          </div>
          <count-to :start-val="0" :end-val="115000" :duration="1600" class="card-panel-num"/>
          <div class="card-panel-end_text " style="color: #FF4141;font-weight: 700" v-if="true">
            <span class="el-icon-bottom"> </span>
            <span>13.8%</span>
          </div>
        </div>


      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :md="6" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper icon-people">
          <img src="../../assets/images/addbaomin.jpg" alt="" width="122px" height="40px">
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text ">
            新增报名数（人）
          </div>
          <count-to :start-val="0" :end-val="1000" :duration="1600" class="card-panel-num"/>
          <div class="card-panel-end_text " style="color: #3CC480;font-weight: 700">
            <span class="el-icon-top"> </span>
            <span>13.8%</span>
          </div>
        </div>
      </div>
    </el-col>

  </el-row>
</template>

<script>
  import CountTo from 'vue-count-to'
  import rectangleIcon from "../../components/rectangleIcon"

  export default {
    props: {
      data: {
        type: Array,
        required: true
      }
    },
    components: {
      CountTo,
      rectangleIcon
    },

    data() {
      return {
        count: 0,

      }
    },
    mounted() {
      this.count = this.getCount();
    },
    methods: {

      getCount() {
        var count = 0;
        for (let i = 0; i < this.data.length; i++) {
          count += this.data[i].data
        }



        return count;

      }

    }
  }
</script>

<style lang="scss" scoped>
  .panel-group {
    .card-panel-col {
      margin-top: 1%;
    }

    .card-panel {

      cursor: pointer;
      font-size: 14px;

      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);

      .icon-people {
        color: #40c9c6;
        font-size: 120px;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3
      }

      .card-panel-icon-wrapper {
        float: right;

        padding-right: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: right;
        font-size: 48px;
      }

      .card-panel-description {
        float: left;

        padding: 22px 0 22px 20px;
        margin-left: 0px;

        .card-panel-text {
          font-size: 15px;
          opacity: 0.5;
          font-family: Microsoft YaHei;
          color: #43425D;
          margin-bottom: 24px;
        }

        .card-panel-end_text, .Cumulative-enrollment-end-text {
          font-size: 14px;
          font-family: Microsoft YaHei;

        }

        .card-panel-end_text {
          color: #F5F5F5;
        }

        .Cumulative-enrollment-end-text {
          color: #282D30;
        }

        .Cumulative-enrollment-text {


          font-family: Microsoft YaHei;
          font-weight: 400;


          color: #282D30;
        }

        .Cumulative-enrollment-num {
          font-size: 40px;

          margin-top: 12px;
          color: #282D30;
        }

        .card-panel-num {
          font-size: 25px;
          margin-top: 30px;
          font-weight: bold;
          color: #4D4F5C;
        }
      }
    }
  }

  @media (max-width: 550px) {
    .card-panel-description {

    }

    .card-panel-icon-wrapper {


      .svg-icon {
        font-size: 32px !important;

      }
    }
  }
</style>
